import { displayTypes } from "../../../../constants/app";
import TaskViewExcel from "./excel";
import { observer } from "mobx-react";
import TaskViewCustomPage from "./cuspage";
import TaskViewForm from "./form";

@observer
export default class TaskViewPage extends React.Component {
    render() {
        const { store } = this.props;
        return (
            <div style={{ height: '100%', display: store.selectedTab === 'page' ? 'block' : 'none' }}>
                {this.renderPage()}
            </div>
        )
    }
    renderPage() {
        const { store } = this.props;
        if (store.displayType === displayTypes.EXCEL) {
            return this.renderExcel();
        } else if (store.displayType === displayTypes.FORM) {
            return this.renderForm();
        } else {
            return this.renderCustomPage();
        }
    }
    renderExcel = () => {
        const { store } = this.props;
        return (
            <TaskViewExcel ecId={`${this && this.props && this.props.ecId || ''}_TaskViewExcel@zzkcx9`} store={store.excel} readonly={!store.canSubmit} />
        );
    }
    renderForm = () => {
        const { store } = this.props;
        return (
            <TaskViewForm ecId={`${this && this.props && this.props.ecId || ''}_TaskViewForm@upsg51`} store={store.form}></TaskViewForm>
        )
    }
    renderCustomPage = () => {
        const { store, loadCurPage } = this.props;
        return (
            <TaskViewCustomPage ecId={`${this && this.props && this.props.ecId || ''}_TaskViewCustomPage@ojuhiy`} store={store.cuspage} loadCurPage={loadCurPage} />
        )
    }
}